<template>
    <div>
      <div class="bg-white shadow-1">
          <q-tabs
            v-model="tab"
            dense
            class="text-grey-9"
            inline-label
            align="left">
            <q-tab name="tab-1">基本信息</q-tab>
            <q-tab :disable="disable" name="tab-2">资质信息</q-tab>
          </q-tabs>
          <q-tab-panels v-model="tab" animated>
            <q-tab-panel name="tab-1">
              <div class="row q-col-gutter-sm">
                <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                  <div>地点</div>
                    <q-input
                    v-model="siteForm.site"
                    dense hint/>
                  </div>
                <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                  <div>位置</div>
                    <q-input
                    v-model="siteForm.location"
                    dense hint/>
                  </div>
                <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                  <div>结算费率</div>
                    <q-input
                    v-model="siteForm.location"
                    dense hint/>
                  </div>
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                  <div>工作地点</div>
                    <q-input
                    maxlength="50"
                    type="textarea"
                    v-model="siteForm.workLocation"
                    dense hint/>
                  </div>
              </div>
              <q-btn dense color="light-blue" :label="$t('保存并继续')" @click="save"/>
            </q-tab-panel>
            <q-tab-panel name="tab-2">
              <q-table
                class="bg-white shadow-1"
                :data="data"
                :columns="columns"
                row-key="id"
                separator="cell"
                selection="multiple"
                :selected.sync="selected"
                :visible-columns="visibleColumns"
                :filter="searchForm"
                :pagination.sync="pagination"
                :rows-per-page-options="[3, 5, 10, 20]"
                no-data-label="暂无数据"
                table-class="h-custom"
                @request="listGet"
              >
                <template v-slot:top-left="props">
                  <q-btn dense color="light-blue" :label="$t('选择资质')" @click="add"/>
                </template>
                <template v-slot:top-right="props">
                  <q-select
                    v-model="visibleColumns"
                    multiple
                    borderless
                    options-dense
                    :display-value="$t('显示列')"
                    emit-value
                    map-options
                    :options="columns"
                    option-value="name"
                    class="q-mx-lg"
                  >
                    <template v-slot:option="scope">
                      <q-item
                        v-bind="scope.itemProps"
                        v-on="scope.itemEvents"
                        v-if="!scope.opt.required"
                      >
                        <q-item-section avatar>
                          <q-toggle color="blue" v-model="visibleColumns" :val="scope.opt.name" />
                        </q-item-section>
                        <q-item-section style="min-width:60px">
                          {{ scope.opt.label }}
                        </q-item-section>
                      </q-item>
                    </template>
                  </q-select>
                  <q-toggle
                    v-model="searchToggle"
                    left-label
                    label="搜索"
                    color="blue"
                    checked-icon="check"
                    unchecked-icon="clear"
                    keep-color
                  />
                  <q-btn
                    flat round dense
                    :icon="props.inFullscreen ? 'fullscreen_exit' : 'fullscreen'"
                    @click="props.toggleFullscreen"
                    class="q-ml-md"
                  />
                </template>
                <template v-if="searchToggle" v-slot:top-row="props">
                  <q-tr :props="props">
                    <q-td>
                    </q-td>
                    <q-td v-for="col in props.cols" :key="col.name" class="relative-position">
                      <q-btn color="primary" dense flat icon="search" class="absolute-center" v-if="col.name==='action'" @click="listGet({ pagination: pagination, filter: searchForm })"/>
                      <q-input dense outlined v-model="searchForm[col.name]" v-else/>
                    </q-td>
                  </q-tr>
                </template>
                <template v-slot:header="props">
                  <q-tr :props="props">
                    <q-th>
                      <q-checkbox indeterminate-value="some" dense v-model="props.selected" />
                    </q-th>
                    <q-th v-for="col in props.cols" :key="col.name" :props="props">
                      {{ col.label }}
                    </q-th>
                  </q-tr>
                </template>
                <template v-slot:body="props">
                  <q-tr :props="props">
                    <q-td width="52">
                      <q-checkbox dense v-model="props.selected" />
                    </q-td>
                    <q-td key="action" :props="props">
                      <q-btn-dropdown
                        color="blue"
                        size="sm"
                        dense
                        menu-anchor="bottom left"
                        menu-self="top left"
                        content-class="text-grey"
                        icon="settings">
                        <q-list dense>
                          <q-item clickable v-close-popup>
                            <q-item-section>
                              <q-item-label>删除</q-item-label>
                            </q-item-section>
                          </q-item>
                          <q-item clickable v-close-popup @click="props.expand = !props.expand">
                            <q-item-section>
                              <q-item-label>{{ props.expand? '收起': '更多字段' }}</q-item-label>
                            </q-item-section>
                          </q-item>
                        </q-list>
                      </q-btn-dropdown>
                    </q-td>
                    <q-td key="name" :props="props">{{ props.row.name }}</q-td>
                    <q-td key="code" :props="props">{{ props.row.code  }}</q-td>
                    <q-td key="createTime" :props="props">{{ props.row.createTime }}</q-td>
                  </q-tr>
                  <q-tr v-show="props.expand" :props="props">
                    <q-td colspan="100%">
                    </q-td>
                  </q-tr>
                </template>
                <template v-slot:pagination="props">
                  <q-pagination
                    v-model="pagination.page"
                    color="blue"
                    :max-pages="6"
                    :max="pages"
                    :boundaryLinks="true"
                    :directionLinks="true"
                  />
                  共 {{ total }} 条
                </template>
              </q-table>
            </q-tab-panel>
          </q-tab-panels>
          <q-dialog
          v-model="addOrEditDialog"
          persistent
          :maximized="maximizedToggle"
          transition-show="slide-up"
          transition-hide="slide-down">
          <q-card class="bg-white relative-position" style="min-width: 40vw">
            <q-bar class="bg-white q-py-lg">
              <strong>选择资质信息</strong>
              <q-space />
              <q-btn dense flat icon="minimize" @click="maximizedToggle = false" :disable="!maximizedToggle">
                <q-tooltip v-if="maximizedToggle" content-class="bg-white text-primary">最小化</q-tooltip>
              </q-btn>
              <q-btn dense flat icon="crop_square" @click="maximizedToggle = true" :disable="maximizedToggle">
                <q-tooltip v-if="!maximizedToggle" content-class="bg-white text-primary">最大化</q-tooltip>
              </q-btn>
              <q-btn dense flat icon="close" @click="addOrEditDialog = false">
                <q-tooltip content-class="bg-white text-primary">关闭</q-tooltip>
              </q-btn>
            </q-bar>
            <q-separator />
            <q-card-section :style="maximizedToggle?'margin-bottom:53px;max-height:83.5vh': 'margin-bottom:53px;min-height:50vh;max-height:60vh'" class="scroll">
              <q-table
              class="bg-white shadow-1"
              :data="dataItem"
              :columns="columsItem"
              row-key="id"
              separator="cell"
              selection="multiple"
              :selected.sync="selectedItem"
              :visible-columns="visibleItemColumns"
              :filter="searchItemForm"
              :pagination.sync="paginations"
              :rows-per-page-options="[3, 5, 10, 20]"
              no-data-label="暂无数据"
              table-class="h-custom"
              @request="listGetItem">
                <template v-slot:top-right="props">
                  <q-select
                   v-model="visibleItemColumns"
                   multiple
                   borderless
                   options-dense
                   :display-value="$t('显示列')"
                   emit-value
                   map-options
                   :options="columsItem"
                   option-value="name"
                   class="q-mx-lg">
                    <template v-slot:option="scope">
                      <q-item
                       v-bind="scope.itemProps"
                       v-on="scope.itemEvents"
                       v-if="!scope.opt.required">
                        <q-item-section avatar>
                          <q-toggle color="blue" v-model="visibleItemColumns" :val="scope.opt.name" />
                        </q-item-section>
                        <q-item-section style="min-width:60px">
                          {{ scope.opt.label }}
                        </q-item-section>
                      </q-item>
                    </template>
                  </q-select>
                  <q-toggle
                    v-model="searchToggles"
                    left-label
                    label="搜索"
                    color="blue"
                    checked-icon="check"
                    unchecked-icon="clear"
                    keep-color/>
                    <q-btn
                    flat round dense
                    :icon="props.inFullscreen ? 'fullscreen_exit' : 'fullscreen'"
                    @click="props.toggleFullscreen"
                    class="q-ml-md"></q-btn>
                </template>
                <template v-if="searchToggles" v-slot:top-row="props">
                  <q-tr :props="props">
                    <q-td></q-td>
                    <q-td  v-for="col in props.cols" :key="col.name" class="relative-position">
                      <q-btn color="primary" dense flat icon="search" class="absolute-center" v-if="col.name==='action'" @click="listGetItem({ pagination: paginations, filter: searchItemForm })"/>
                      <q-input dense outlined v-model="searchItemForm[col.name]" v-else/>
                    </q-td>
                  </q-tr>
                </template>
                <template v-slot:header="props">
                  <q-tr :props="props">
                    <q-th>
                      <q-checkbox indeterminate-value="some" dense v-model="props.selected" />
                    </q-th>
                    <q-th v-for="col in props.cols" :key="col.name" :props="props">
                      {{ col.label }}
                    </q-th>
                  </q-tr>
                </template>
                <template v-slot:body="props">
                  <q-tr :props="props">
                    <q-td width="52">
                      <q-checkbox dense v-model="props.selected" />
                    </q-td>
                    <q-td key="action" :props="props">
                      --
                    </q-td>
                    <q-td key="name" :props="props">{{ props.row.name }}</q-td>
                    <q-td key="nameEn" :props="props">{{ props.row.nameEn }}</q-td>
                    <q-td key="createTime" :props="props">{{ props.row.createTime }}</q-td>
                    <q-td key="createUserName" :props="props">{{ props.row.createUserName }}</q-td>
                     <q-td key="remark" :props="props">{{ props.row.remark }}</q-td>
                  </q-tr>
                </template>
                <template v-slot:pagination="props">
                  <q-pagination
                   v-model="paginations.page"
                   color="blue"
                   :max-pagess="5"
                   :max="pagess"
                   :boundaryLinks="true"
                   :directionLinks="true"
                  />
                 共 {{ totals }} 条
                </template>
              </q-table>
            </q-card-section>
            <q-separator class="absolute" style="bottom: 52px; left: 0"/>
            <q-card-actions align="right" class="absolute-bottom bg-white">
              <q-btn flat label="取消" color="primary" v-close-popup />
              <q-btn flat label="保存" color="primary" :loading="loadingSave"/>
            </q-card-actions>
          </q-card>
        </q-dialog>
      </div>
  </div>
</template>

<script>
export default {
  name: 'addqualifications',
  data () {
    return {
      tab: 'tab-1',
      // 保存loading
      loadingSave: false,
      disable: true,
      // 获取资质信息
      searchToggles: false,
      dataItem: [],
      selectedItem: [],
      totals: 0,
      paginations: {
        page: 1,
        rowsPerPage: 10,
        rowsNumber: 10,
        sortBy: '',
        descending: Boolean
      },
      searchItemForm: {
        name: '',
        nameEn: '',
        createTime: '',
        createUserName: ''
      },
      // 弹窗
      addOrEditDialog: false,
      maximizedToggle: false,
      searchToggle: false,
      searchForm: {
        name: '',
        code: '',
        createTime: ''
      },
      // 地点信息
      siteForm: {
        site: '',
        location: '',
        workLocation: ''
      },
      selected: [],
      visibleColumns: [
        'action',
        'name',
        'code',
        'createTime'
      ],
      visibleItemColumns: [
        'action',
        'name',
        'nameEn',
        'createTime',
        'createUserName',
        'remark'
      ],
      // 当加入 required: true 属性时  visibleColumns 对当前字段无效
      columns: [
        { name: 'action', align: 'center', label: '操作' },
        { name: 'name', required: true, label: '地点名称', align: 'left', field: 'name', sortable: true },
        { name: 'code', required: true, label: '地点编码', align: 'left', field: 'code', sortable: true },
        { name: 'createTime', field: 'createTime', align: 'left', label: '创建时间', sortable: true }
      ],
      // 资质信息
      columsItem: [
        { name: 'action', align: 'center', label: '操作' },
        { name: 'name', required: true, label: '名称', align: 'left', field: 'name', sortable: true },
        { name: 'nameEn', required: true, label: '英文名称', align: 'left', field: 'nameEn', sortable: true },
        { name: 'createTime', field: 'createTime', align: 'left', label: '创建时间', sortable: true },
        { name: 'createUserName', field: 'createUserName', align: 'left', label: '创建人', sortable: true },
        { name: 'remark', field: 'remark', align: 'left', label: '说明', sortable: true }
      ],
      data: [],
      total: 0,
      pagination: {
        page: 1,
        rowsPerPage: 10,
        rowsNumber: 10,
        sortBy: '',
        descending: Boolean
      }
    }
  },
  computed: {
    pages () {
      return Math.ceil(this.total / this.pagination.rowsPerPage)
    },
    pagess () {
      return Math.ceil(this.totals / this.paginations.rowsPerPage)
    }
  },
  watch: {
    'pagination.page' () {
      this.listGet({
        pagination: this.pagination,
        filter: this.searchForm
      })
    },
    'paginations.page' () {
      console.log(this.pagination)
      this.listGetItem({
        pagination: this.paginations,
        filter: this.searchItemForm
      })
    }
  },
  created () {
    console.log(this.$route.params.addEdit)
    this.init()
  },
  methods: {
    save () {
      this.disable = false
      this.tab = 'tab-2'
    },
    init () {
      this.listGet({
        pagination: this.pagination,
        filter: this.searchForm
      })
      this.listGetItem({
        pagination: this.paginations,
        filter: this.searchItemForm
      })
    },
    async add () {
      this.addOrEditDialog = true
    },
    async listGetItem (props) {
      let { page, rowsPerPage, sortBy, descending } = props.pagination, filter = props.filter
      await this.$api({
        method: 'post',
        url: '/mdm/site/query',
        params: {
          pageNo: page,
          pageSize: rowsPerPage,
          sort: sortBy,
          order: descending === true ? 'desc' : (descending === false ? 'asc' : ''),
          ...filter
        },
        emulateJSON: true,
        useLoadLayer: true,
        successCallback: ({ data }) => {
          this.totals = data.total
          this.dataItem = data.list
        },
        errorCallback (err) {
          console.log('未处理的业务级error：', err)
        }
      })
      this.paginations.page = page
      this.paginations.rowsPerPage = rowsPerPage
      this.paginations.sortBy = sortBy
      this.paginations.descending = descending
    },
    async listGet (props) {
      let { page, rowsPerPage, sortBy, descending } = props.pagination, filter = props.filter
      await this.$api({
        method: 'post',
        url: '/mdm/site/query',
        params: {
          pageNo: page,
          pageSize: rowsPerPage,
          sort: sortBy,
          order: descending === true ? 'desc' : (descending === false ? 'asc' : ''),
          ...filter
        },
        emulateJSON: true,
        useLoadLayer: true,
        successCallback: ({ data }) => {
          this.total = data.total
          this.data = data.list
        },
        errorCallback (err) {
          console.log('未处理的业务级error：', err)
        }
      })
      this.pagination.page = page
      this.pagination.rowsPerPage = rowsPerPage
      this.pagination.sortBy = sortBy
      this.pagination.descending = descending
    }
  }
}
</script>

<style  lang="stylus" scoped>
  .q-table__container
    box-shadow none
  .q-table--bordered
    border none
</style>
